<script setup lang="ts">
import { MapItemLink } from '@/map-item'
import { time2dHHMMSS } from '@/widgets'
import { routingMapItem } from '../routing'
import { airportMapItem } from '../airport'
import { aircraftMapItem } from '../aircraft'
import { showAircraftTypeView } from '../aircraft-type'
import type { FlightPlan } from './types'
import { getFlightPlanInfoById } from './fpl-info'
const props = defineProps<{
  type: string
  item: FlightPlan
}>()

const id = props.item.id
const info = getFlightPlanInfoById(id)
const ac = info.aircraft
const acType = info.aircraftType
const routing = info.routing
const depApt = info.depApt || null
const arrApt = info.arrApt || null
const startTime = time2dHHMMSS(props.item.startTime)

function showAcTypeView() {
  showAircraftTypeView(acType)
}
</script>
<template>
  <div class="flight-plan-info">
    <div class="pane-block">
      <div class="row">
        <div class="col-5em">飞行计划</div>
        <div class="col">{{ id }}</div>
      </div>
      <div class="row">
        <div class="col-5em">飞机</div>
        <MapItemLink :txt="ac" :item="aircraftMapItem" />
      </div>
      <div class="row">
        <div class="col-5em">机型</div>
        <div class="act-txt" @click="showAcTypeView">{{ acType }}</div>
      </div>
      <div class="row">
        <div class="col-5em">飞行路线</div>
        <MapItemLink :txt="routing" :item="routingMapItem" />
      </div>
      <div class="row">
        <div class="col-5em">起飞机场</div>
        <MapItemLink v-if="depApt" :txt="depApt" :item="airportMapItem" />
        <div v-else>-</div>
      </div>
      <div class="row">
        <div class="col-5em">落地机场</div>
        <MapItemLink v-if="arrApt" :txt="arrApt" :item="airportMapItem" />
        <div v-else>-</div>
      </div>
      <div class="row">
        <div class="col-5em">起飞时间</div>
        <div>{{ startTime }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
@import '@/map/style/var';
.flight-plan-info {
  .act-txt {
    cursor: pointer;
    border-bottom: 1px solid transparent;
    &:hover {
      border-bottom-color: $map-fg;
    }
  }
  //nothing
}
</style>
